import React, { useEffect, useState } from 'react'
import { Table, Space, Button, Modal, message, Switch } from 'antd'
import { DeleteTwoTone, EditTwoTone, ExclamationCircleFilled } from '@ant-design/icons';
import axios from 'axios';



export default function UserList() {
    const { confirm } = Modal;
    const [loading, setLoading] = useState(false)
    const [list, setList] = useState([])
    const [createOpen, setCreateOpen] = useState(false);
    const [editOpen, setEditOpen] = useState(false);
    const [currentListId, setCurrentListId] = useState()

    const onChange = (recoder) => {
        setLoading(true)
        changeStatus(recoder)

    };
    async function changeStatus(recoder) {
        console.log("recoder", recoder)
        await axios.patch(`http://192.168.2.3:3000/users/${recoder.id}`, { status: !recoder.status })
            .then(res => {
                if (res.status === 200) {
                    message.info(res.data.status === true ? "启用成功！" : "禁用成功！")
                } else {
                    message.error("修改失败")
                }
            })
        const get = await axios.get("http://192.168.2.3:3000/users?_expand=role");
        const getRes = get.data;
        console.log("getRes", getRes)
        setList(getRes)
        setLoading(false)


    }
    useEffect(() => {
        setLoading(true)
        axios.get("http://192.168.2.3:3000/categories")
            .then(res => {
                setList(res.data)
                setLoading(false)
            })
        return () => { }
    }, []
    )

    const showDeleteConfirm = (record) => {
        confirm({
            title: '删除',
            icon: <ExclamationCircleFilled />,
            content: '你确定要删除吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                console.log("record.default", record.default)
                if (!record.default) {
                    setLoading(true)
                    deleteAndGet(record.id);
                    console.log('OK');
                } else {
                    message.info("默认用户不能删除！")
                }

            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    async function deleteAndGet(id) {
        try {
            await axios.delete(`http://192.168.2.3:3000/users/${id}`)
                .then(res => {
                    if (res.status === 200) {
                        message.info("删除成功！")
                    } else {
                        message.error("删除失败！")
                    }
                })
            const get = await axios.get("http://192.168.2.3:3000/users?_expand=role");
            const getRes = get.data;
            console.log("getRes", getRes)
            setList(getRes)
            setLoading(false)
        } catch (error) {
            console.error(error);
        }
    }
    const editClick = (data) => {
        console.log("editClick", data)
        setCurrentListId(data.id)
        setEditOpen(true)

    };
    const createClick = () => {
        console.log("createClick")
        setCreateOpen(true)

    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '分类名词',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '分类描述',
            dataIndex: 'value',
            key: 'value',
            render: (_, recoder) => <Switch   disabled={recoder.id === 1} checked={recoder.status} onChange={() => { onChange(recoder) }} />
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button
                        disabled={record.id === 1}
                        danger
                        type='primary'
                        shape="circle"
                        onClick={() => showDeleteConfirm(record)}
                        icon={<DeleteTwoTone twoToneColor="#eb2f96" />} />
                    <Button
                        disabled={record.id === 1}
                        type='primary'
                        shape="circle"
                        icon={<EditTwoTone />}
                        onClick={() => editClick(record)}
                    />

                </Space >
            ),
        },
    ];
    return (
        <div>
            <div style={{
                "float": "right",
                "margin": "8px"
            }}>
                <Button
                    type="primary"
                    size='large'
                    onClick={() => {
                        createClick();
                    }}>
                    新建
                </Button>
            </div>
            <Table
                rowKey={(list) => list.id}
                columns={columns}
                pagination={false}
                dataSource={list}
                loading={loading}
                locale={{ emptyText: "这里没数据，别瞅了" }}
            />
            {/* {createOpen && <Create
                createOpen={createOpen}
                setList={setList}
                setCreateOpen={setCreateOpen}
                setLoading={setLoading}
            />}
            {editOpen && <EditUser
                setList={setList}
                setEditOpen={setEditOpen}
                setLoading={setLoading}
                id={currentListId}
            />} */}
        </div>

    )
}
